<template>
  <div style="width:500px">
    <label for="password">请输入旧密码
    <i class="el-icon-circle-check" v-if="old_password_i"></i>
      <el-popover placement="right" title="" width="200" trigger="hover" :content="old_password_tips">
        <el-input slot="reference" placeholder="请输入旧密码" v-model="old_password" show-password id="password"></el-input>
      </el-popover>
    </label>

    <label for="password">请输入新密码
    <i class="el-icon-circle-check" v-if="new_password_i"></i>
      <el-popover placement="right" title="" width="200" trigger="hover" :content="password_tips">
        <el-input slot="reference" placeholder="请输入新密码" v-model="password" show-password id="password"></el-input>
      </el-popover>
    </label>

    <label for="confirmPassword">请再次输入新密码
    <i class="el-icon-circle-check" v-if="new_confirmPassword_i"></i>
      <el-popover placement="right" title="" width="200" trigger="hover" :content="confirmPassword_tips">
        <el-input slot="reference" placeholder="请输入确认密码" v-model="confirmPassword" show-password id="confirmPassword"></el-input>
      </el-popover>
    </label>

    <el-button type="primary" @click ="confirmResetPassword">确认更改密码</el-button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      old_password_tips : '即您当前正在使用的密码',
      password_tips : '新密码必须由6~18位的数字、字母和特殊符号组成,不能与旧密码一致',
      confirmPassword_tips : '确认新密码请与新密码保持一致',

      old_password_i : false,
      new_password_i : false,
      new_confirmPassword_i : false,

      old_password : '',
      password : '',
      confirmPassword : '',
    }
  },

  watch: {
    password (){
      if(this.password.length>=6 && this.password.length<=18){
        this.new_password_i = true
      }
    },
    confirmPassword(){
      if(this.confirmPassword === this.password){
        this.new_confirmPassword_i = true
      }
    } 
  },

  methods : {
    async confirmResetPassword(){
      //测试用 token 值
      this.$cookie.set( "token" ,'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwidXNlcm5hbWUiOiJ0ZXN0IiwicGFzc3dvcmQiOiIiLCJuaWNrbmFtZSI6Iua1i-ivleeUqOS-iyIsImVtYWlsIjoidGVzdDEyMzQ1NkBxcS5jb20iLCJ1c2VyX3BpYyI6IiIsImlhdCI6MTY1MTI5MjQ1MiwiZXhwIjoxNjUxMzI4NDUyfQ.2SEMpNAUmt3D8QvLZd06gQ9GHAVZuU3u7t2F9jFbxuY', 1)

      const token = this.$cookie.get('token')
      this.$http.interceptors.request.use(function (config) {
        config.headers.Authorization = token
        return config;
      }, function (error) {
        return Promise.reject(error);
      });

      if(this.confirmPassword === this.password){
        const res = await this.$http.post('/my/updatepwd',{
          oldPwd : this.old_password,
          newPwd : this.confirmPassword
        })

        if(res.data.status === 0){
          this.$message({
            message: '密码修改成功!!!',
            type: 'success'
          });
        }else{
           this.$message.error(res.data.message);
        }
      }else{
        this.$message.error('请确认新密码和确认密码是否一致');
      }
      
    }
  }
}
</script>

<style>
i{
  color:forestgreen;
}
</style>